<template>
	<view class="container">
	
		<view class="bg-gradual-orange">
			<custom-ui bgColor="bg-gradual-orange" >
				<block slot="content" >干饭人地下机密组织</block>
			</custom-ui>
			<view class="cu-bar search">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="搜索音乐 / 歌词" confirm-type="search" @click="search"></input>
				</view>
			</view>
		</view>
		
		<view class="box1 align-center">
			<!-- <view class="hight"></view> -->
			<!-- 轮播图 -->
			<view class="banner" >
				<swiper autoplay="true" interval="5000" duration="500" indicator-dots="true">
					<swiper-item v-for="url in imageUrls">
						<image :src="url" style="height:150px;width: 100%;"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- <image src="../../static/15.jpg"></image> -->
		</view>
		<!-- 四个图标 -->
		<view class="list-wrapper flex justify-around">
			<view class="item">
				<image src="../../static/100.png">
					<text>每日推荐</text>
				</image>
			</view>
			<view class="item">
				<image  @click="musiclist" src="../../static/101.png">
					<text>推荐歌曲</text>
				</image>
			</view>
			<view class="item" @click="gotoRank">
				<image src="../../static/102.png" >
					<text>排行榜</text>
				</image>
			</view>
			<view class="item">
				<image src="../../static/103.png" @click="hot">
					<text>热门歌手</text>
				</image>
			</view>
		</view>
		
		<view class="box3 flex justify-between">
			<view class="">
				<h3>热门推荐歌单</h3>
			</view>
			<view class="zy-title">
				<text class="more">
					<text>查看更多</text>
					<text class="iconfont icon-kaishi2"></text>
				</text>
			</view>
		</view>
		<!-- 推荐歌单横向滚动 -->
		<scroll-view scroll-x="true">
		<view style="display: flex; flex-direction: row;">
		<view  class="" v-for="(item,name,index) in songList" :key='item.id'>
			<view class="item1" style="margin: 5px;">
				<image :src="item.picUrl" mode=""></image>
				<view class="title">{{item.name}}</view>
			</view>
		</view>
		</view>
		</scroll-view>
		
		<view class="box3 flex justify-between">
			<view class="">
				<h3>新歌速递</h3>
			</view>
			<view class="zy-title">
				<!-- <button class="">
					<text style="display: flex;">播放全部></text>
				</button> -->
				<text class="more">
					<text class="iconfont icon-kaishi2"></text>
					<text>播放全部</text>
				</text>
			</view>
			
		</view>
		
		<!-- 新歌速递歌单 -->
		<view class="music-swiper">
			<view v-if="newSongList.length==0">
				<text>加载失败了😭</text>
			</view>
			<scroll-view class="zy-list" style="margin-top: 5px;" v-if="newSongList.length!=0">
				<swiper style="margin-top:8px;height:190px" next-margin="30px">
					<swiper-item class="music-swiper-item" v-for="groupNo in musicSwiperGroups">
						<view class="zy-song-item flex align-center" v-for="(item, index) in newSongList"
							v-if="(index>=groupNo*3)&&(index<(groupNo*3+3))">
							<image :src="item.picUrl" mode="scaleToFill" class="music-song-item-image"></image>
							<view class="music-text">
								<text style="{ color: '#000' }">{{ item.name }}</text>
								<text style="{ color: '#666';font-size:12px; }">-{{item.song.artists[0].name}}</text>
							</view>
							<text class="startIcon icon-kaishi3"></text>
						</view>
					</swiper-item>
				</swiper>
			</scroll-view>
		</view>

		<view class="box3 flex justify-between">
			<view class="">
				<h3>网友精选歌单</h3>
			</view>
			<view class="zy-title">
				<text class="more">
					<text>查看更多</text>
					<text class="iconfont icon-kaishi2"></text>
				</text>
			</view>
			
		</view>
		
		<scroll-view scroll-x="true">
		<view style="display: flex; flex-direction: row;">
		<view  class="" v-for="(item,name,index) in songList1" :key='item.id'>
			<view class="item1" style="margin: 5px;">
				
				<image :src="item.coverImgUrl" mode=""></image>
				<view class="title">{{item.name}}</view>
			</view>
			
		</view>
		</view>
		</scroll-view>
		
		<view class="box3 flex justify-between">
			<view class="">
				<h3>热门歌手</h3>
			</view>
			<view class="zy-title">
				<text class="more">
					<text>查看更多</text>
					<text class="iconfont icon-kaishi2"></text>
				</text>
			</view>
		</view>
		
		<!-- 热门歌手区域 -->
		<scroll-view scroll-x="true">
		<view style="display: flex; flex-direction: row;">
		<view  class="" v-for="(item,name,index) in songList2" :key='item.id'>
			<view class="item2" style="margin: 5px;">
				
				<image :src="item.img1v1Url" mode=""></image>
				<view class="title">{{item.name}}</view>
				<!-- <view>{{item.albem}}</view> -->
			</view>
			
		</view>
		</view>
		</scroll-view>
		<view style="height: 40px;"></view>
	
		
	</view>

</template>

<script>
	//v-if v-else v-show
	//v-bind:class 简写为 :class
	
	
	export default {
		data:function() {
			return {
				isLogin:false,
				msg:"hellow",
				bgState:false,
				songList2:[
					
				],
				songList1:[
					
				],
				songList:[
				],
				newSongList: [],
				musicSwiperGroups: [0,1,2],
				imageUrls:[
					"http://p1.music.126.net/LW7KSq3N21AUF_-rGMGa1w==/109951166710254012.jpg",
					"http://p1.music.126.net/CBUyBfljkXuLO5tj-QzKVA==/109951166710247939.jpg",
					"http://p1.music.126.net/ZX7emBIiv54ShcleNrhIgw==/109951166712744051.jpg",
					"http://p1.music.126.net/cBhAvXrRt_CGLiUPKWEwZA==/109951166711221663.jpg",
					"http://p1.music.126.net/rcae_4QTF7560_cwHlqHFQ==/109951166712739897.jpg",
					"http://p1.music.126.net/S0kp75ZdV4ZhB2vkYRJwyg==/109951166691807393.jpg",
					"http://p1.music.126.net/2Rqx35EyC0ztcInoGEn1cg==/109951166710508319.jpg",
					"http://p1.music.126.net/k_PsU4psgmMRGFDFLumXgg==/109951166712054746.jpg"
				],
				imageUrls1:[
					"https://p1.music.126.net/WBKBsIFqP8TnhFV_tuR4OQ==/109951166713079510.jpg?param=230y230",
					"https://p1.music.126.net/WBKBsIFqP8TnhFV_tuR4OQ==/109951166713079510.jpg?param=230y230",
					"https://p1.music.126.net/WBKBsIFqP8TnhFV_tuR4OQ==/109951166713079510.jpg?param=230y230",
				]
			}
		},
		methods:{
			getListHandel2(){
					uni.request({
						url:'https://autumnfish.cn/artist/list',
						data:{},
						success: (res) => {
							console.log(res.data);
							this.songList2=res.data.artists
							
						}
					})
				}
			,
			getListHandel1(){
					uni.request({
						url:'https://autumnfish.cn/top/playlist',
						data:{},
						success: (res) => {
							console.log(res.data);
							this.songList1=res.data.playlists
							
						}
					})
				}
			,
			getListHandel(){
					uni.request({
						url:'https://autumnfish.cn/personalized',
						data:{},
						success: (res) => {
							console.log(res.data);
							this.songList=res.data.result
							
						}
					})
				
			},
			hot(){
				uni.navigateTo({
					url:'../hotsinger/hotsinger'
				})
			},
			//注册函数 可以有多个
			search(){
				uni.navigateTo({
					url:'../search/search'
				})
			},
			changeBg:function(){
				console.log(this)//代表整个页面
				this.bgState=!this.bgState
			},
			gotoRank(){
				uni.navigateTo({
					url:"../rank/rank"
				})
			},
			musiclist(){
				uni.navigateTo({
					url:'../showList/showList'
				})
			}
		}
		,
		onLoad(){
				this.getListHandel1('1'),
				this.getListHandel('1'),
				this.getListHandel2('1'),
				// console.log('页面打开了'),
				// this.getListHandel()
				uni.request({
					url: 'https://autumnfish.cn/personalized/newsong',
					success: (res) => {
						this.newSongList = res.data.result;
						console.log(this.newSongList)
						console.log(this.newSongList[0].song.artists[0].name)
					}
				})
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 100%;
	}
	.list-wrapper {
		margin: 1.5px 0;
	
		.list-item {
			text-align: center;
			font-size: 24rpx;
		}
	
		.list-ico {
			font-size: 54rpx;
			margin-bottom: 4px;
		}
	}
	.music-wrapper {
		margin: 20px 0;
	
		&:last-of-type {
			margin-bottom: 0;
		}
	}
	//歌曲列表
	.music-swiper {
	
		&:last-of-type {
			margin-bottom: 0;
		}
		
		.music-swiper-item {
			padding-left: 6px;
			box-sizing: border-box;
		}
		
		.zy-song-item {
			width: 100%;
		
			.music-song-item-image {
				width: 53px;
				height: 53px;
				border-radius: 7px;
				margin: 7px 10px 0 0;
			}
		
			.music-text {
				width: calc(100% - 120px);
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		
			.startIcon {
				margin-left: 15px;
				font-size: 40rpx;
				color: #ff9700;
			}
		}
	}
.a{	
	display: flex;
	justify-content: space-around;
	flex-wrap:wrap ;
}
.a1{
	display: flex;
	flex-direction: column;
	//#顺时针转向下写
	align-items: center;
	text{
		font-size: 20px;
	}
}

.flex{
	display: flex;
	&-column{
	flex-direction: column;	
}
	&-wrap{
	flex-wrap: wrap;
	}
}
.flex1{
	display: flex;
	width: 10px;
}
.hight{
	height: 30px;
}
.justify{
	&-center{
		justify-content: center;
}
	&-around{
	justify-content: space-around;
}
	&-between{
	justify-content: space-between;
	}
}

.align{
	&-center{
	align-items:center;
}
}
.item3{
	
	display: flex;
	image{
		border-radius: 5px;
		height: 80px;
		width: 80px;
	}
	text{
		font-size: 12px;
		
	}
}
.item2{
	
	display: flex;
	flex-direction: column;
	//#顺时针转向下写
	align-items: center;
	image{
		border-radius: 50%;
		height: 80px;
		width: 80px;
	}
	text{
		font-size: 12px;
		
	}
}
.item5{
	display: flex;
	flex-direction: column;
	//#顺时针转向下写
	align-items: center;
	image{
		border-radius: 5px;
		height: 80px;
		width: 80px;
	}
	text{
		font-size: 12px;
		
	}
}

.item{
	display: flex;
	flex-direction: column;
	//#顺时针转向下写
	align-items: center;
	image{
		border-radius: 5px;
		height: 30px;
		width: 30px;
	}
	text{
		font-size: 12px;
		padding: 5px;
	}
}
.item1{
	// height: 300px;
	display: flex;
	flex-direction: column;
	//#顺时针转向下写
	align-items: center;
	image{
		border-radius: 5px;
		height: 120px;
		width: 105px;
	}
	text{
		font-size: 12px;
		
	}
}
.box1{
	box-sizing: border-box;//添加此行使borders和padding全都包含在定义的宽高里面
	padding: 10px;//内边距10像素，使他不要贴紧边缘
	border-radius: 5px;
	justify-content: space-around;
	flex-wrap:wrap ;
	image{
		border-radius: 5px;
		width: 340px;
		height: 170px;
	}
}
.box3{
	height: 40px;
	padding: 5px;
	text{

		font-size: 12px;
	}
	button{
		height: 30px;
	}
	
}
.box4{
	image{
		border-radius: 5px;
		height: 60px;
		width: 60px;
	}
}
input{
		border: 3px;
		background-color:#F8F8F8;
}
</style>
